import React, { Component } from "react";
import Proptypes from "prop-types";

import index from "./index.module.less";
import logo from "@/logo.svg";

class Item extends Component {
  static propTypes = {
    comment: Proptypes.object.isRequired,
    index: Proptypes.number.isRequired,
    deleteComment: Proptypes.func.isRequired,
  };
  remove = () => {
    const { index, deleteComment } = this.props;
    deleteComment(index);
  };
  render() {
    const { comment } = this.props;
    return (
      <div className={`row panel panel-primary ${index.Row}`}>
        <div className={`${index.ClosePannel}`} onClick={this.remove}>
          x
        </div>
        <div className="panel-body">
          <img src={logo} alt="logo" />
          <strong>{comment.username}</strong>
        </div>
        <div className={`panel-footer ${index.Right}`}>{comment.content}</div>
      </div>
    );
  }
}

export default Item;
